import {create} from "zustand";
import {getUrlWithParams} from "@/utils";
import {immer} from 'zustand/middleware/immer'
import {devtools, persist} from 'zustand/middleware'
import {type useSettersStoreType, type useGettersStoreType, type useTabsStoreType} from "@/typings/store";


const initialState: useTabsStoreType.stateType = {
    tabsList: []
}

const actions = (set: useSettersStoreType<useTabsStoreType.storeType>, get: useGettersStoreType<useTabsStoreType.stateType>) => {
    const setTabsList = (payload: useTabsStoreType.TabsListProp[]) => {
        set((state: useTabsStoreType.stateType) => {
            state.tabsList = payload
        })
    }
    const addTab = (payload: useTabsStoreType.TabsListProp) => {
        if (get().tabsList.every(item => item.path !== payload.path)) {
            set((state: useTabsStoreType.stateType) => {
                state.tabsList.push(payload);
            })
        }
    }
    const removeTab = (payload: { path: string; isCurrent: boolean }) => {
        if (!get().tabsList.find(item => item.path === payload.path)?.closable) return;
        if (payload.isCurrent) {
            get().tabsList.forEach((item, index) => {
                if (item.path !== payload.path) return;
                const nextTab = get().tabsList[index + 1] || get().tabsList[index - 1];
                if (!nextTab) return;
                window.$navigate(nextTab.path);
            });
        }
        set((state: useTabsStoreType.stateType) => {
            state.tabsList = get().tabsList.filter(item => item.path !== payload.path);
        })
    }

    const closeTabsOnSide = (payload: { path: string; type: "left" | "right" }) => {
        const currentIndex = get().tabsList.findIndex(item => item.path === payload.path);
        if (currentIndex !== -1) {
            const range = payload.type === "left" ? [0, currentIndex] : [currentIndex + 1, get().tabsList.length];
            set((state: useTabsStoreType.stateType) => {
                state.tabsList = get().tabsList.filter((item, index) => {
                    return index < range[0] || index >= range[1] || !item.closable;
                });
            })
        }
    }
    const closeMultipleTab = (payload: { path?: string }) => {
        set((state: useTabsStoreType.stateType) => {
            state.tabsList = get().tabsList.filter(item => {
                return item.path === payload.path || !item.closable;
            });
        })
    }
    const setTabTitle = (payload: string) => {
        set((state: useTabsStoreType.stateType) => {
            state.tabsList = get().tabsList.map(item => {
                if (item.path == getUrlWithParams()) return {...item, title: payload}
                return item;
            });
        })
    }
    return {setTabsList, addTab, removeTab, closeTabsOnSide, closeMultipleTab, setTabTitle}
}

const storage = {name: 'tabs-storage'}
export const useTabsStore = create<useTabsStoreType.storeType>()(devtools(persist(immer((set, get) => ({
    ...initialState,
    // @ts-ignore
    ...actions(set, get)
})), storage), storage))
